import {Menu, theme,Layout } from 'antd';
import React from 'react';
import {useNavigate,useLocation} from 'react-router-dom';
const { Sider } = Layout;
const items2 = [ {
        key:"/nav/home",
        label:"首页",
		roles:["超级管理员"]
    },
    {
        key:"shop",
        label:"店铺管理",
        children:[
            {
                key:"/nav/shopList",
                label:"店铺列表"
            },
            {
                key:"/nav/addShop",
                label:"新增店铺",
				roles:["超级管理员"]
            },
        ]
    },
    {
        key:"account",
        label:"账号管理",
        children:[
            {
                key:"/nav/accountsList",
                label:"账号列表"
            },
            {
                key:"/nav/addAccount",
                label:"新增账号",
				roles:["超级管路员"]
            },
        ]
    }];
	function filterData(arr,role){
			return arr.filter(ele =>ele.roles ||ele.roles.includes(role)).map(item=>{
				let obj = {
				    ...item,
				}
				if(item.children){//如果有children,则对children做同样的处理
				    obj.children = filterData(item.children,role);
				}
				return obj; 
			 });
	}
export default function MyHeader(){
	const {
	  token: { colorBgContainer },
	} = theme.useToken();
	 const navigate = useNavigate();
	const {role} = JSON.parse(localStorage.userInfo);
	function onChoose(val){
		const keys = val.keyPath[1];
		navigate(val.key,{state:keys})
	}
	return (
	    <Sider
	         width={200}
	         style={{
	           background: colorBgContainer,
	         }}
	       >
	         <Menu
	           mode="inline"
	           defaultSelectedKeys={[location.pathname]}
	           defaultOpenKeys={[location.state]}
	           style={{
	             height: '100%',
	             borderRight: 0,
	           }}
	           items={filterData(items2,role)}
			   onClick={onChoose}
	         />
	       </Sider>
	)
}
 